<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>报告单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .subject-title {
            margin-top: 20px;
            width: 100%;
            height: 38px;
            line-height: 38px;
            padding: 0 50px;
        }

        .subject-title b {
            display: block;
            width: 100%;
            height: 38px;
            background: #ddd;
            text-indent: 10px;
            border-left: 4px solid #317ef3;
        }

        .down-head {
            padding: 8px 0 0 40px;
            width: 100%;
            height: 70px;
            background: #466288;
        }

        .down-head img {
            cursor: pointer;
        }

        .checkscore-wrapper {
            display: flex;
            width: 100%;
            background: #fff;
        }

        .checkscore-wrapper .checkscore-content {
            flex: 1;
            margin: 20px 20px 0 20px;
            padding-bottom: 200px;
            min-height: 700px;
            background: #fff;
            /* 学生信息 */
            /* 科目得分分析 */
        }

        .checkscore-wrapper .checkscore-content .info-content .title {
            padding: 15px 0;
            text-align: center;
        }

        .checkscore-wrapper .checkscore-content .info-content .info-list {
            width: 100%;
            padding: 15px 100px 0 100px;
        }

        .checkscore-wrapper .checkscore-content .info-content .info-list ul {
            display: flex;
        }

        .checkscore-wrapper .checkscore-content .info-content .info-list ul li {
            flex: 1;
        }

        .checkscore-wrapper .checkscore-content .info-content .info-list ul li:nth-child(2), .checkscore-wrapper .checkscore-content .info-content .info-list ul li:nth-child(3) {
            text-align: center;
        }

        .checkscore-wrapper .checkscore-content .info-content .info-list ul li:nth-child(4) {
            text-align: right;
        }

        .checkscore-wrapper .checkscore-content .info-content .info-list ul li b {
            display: inline-block;
            margin-left: 10px;
            padding: 0 15px;
            width: 170px;
            font-weight: normal;
            text-align: center;
            color: #6677ac;
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            border-bottom: 1px solid #333;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper {
            width: 100%;
            padding: 0 50px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .title {
            width: 100%;
            height: 25px;
            line-height: 25px;
            background: #e7e3ed;
            color: #333;
            text-align: center;
            overflow: hidden;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .title > div {
            float: left;
            text-align: center;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper > div {
            margin-top: 20px;
            width: 100%;
            height: 350px;
            border: 1px solid #ddd;
            overflow: hidden;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .left-title {
            width: 45%;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .right-title {
            width: 55%;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .rader-content {
            width: 100%;
            height: 325px;
            overflow: hidden;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .rader-content .charts {
            float: left;
            width: 45%;
            height: 325px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .rader-content .score-num {
            float: left;
            width: 55%;
            height: 325px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num {
            padding: 40px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num .score-num-content .border {
            width: 100%;
            height: 8px;
            background: #00c3c0;
            background: linear-gradient(left, #00c3c0, #7968a8);
            background: -o-linear-gradient(left, #00c3c0, #7968a8);
            background: -moz-linear-gradient(left, #00c3c0, #7968a8);
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#00c3c0), to(#7968a8));
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num .score-num-content .nums ul li {
            display: flex;
            flex: 1;
            height: 75px;
            border-bottom: 1px solid #ddd;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num .score-num-content .nums ul li:last-child {
            border-bottom: none;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num .score-num-content .nums ul li > div:first-child {
            text-align: left;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num .score-num-content .nums ul li > div:last-child {
            text-align: right;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num .score-num-content .nums ul li div {
            flex: 1;
            text-align: center;
            line-height: 75px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num .score-num-content .nums ul li div span {
            vertical-align: middle;
            font-size: 14px;
            color: #333;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .radar-wrapper .score-num .score-num-content .nums ul li div b {
            margin-left: 10px;
            vertical-align: middle;
            font-size: 21px;
            color: #7968a8;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .really-wrapper {
            display: inline-block;
            width: 75%;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .really-wrapper .really-content {
            float: left;
            width: 100%;
            height: 325px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .really-wrapper .really-content > div {
            width: 100%;
            height: 325px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .score-wrapper {
            margin-left: 1%;
            /* display: inline-block; */
            float: right;
            width: 24%;
            height: 350px;
            border: 1px solid #ddd;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .score-wrapper .score-border {
            width: 100%;
            height: 15px;
            background: #00c3c0;
            background: linear-gradient(left, #b90077, #fd006f);
            background: -o-linear-gradient(left, #b90077, #fd006f);
            background: -moz-linear-gradient(left, #b90077, #fd006f);
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#b90077), to(#fd006f));
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .score-wrapper .percent-border {
            width: 100%;
            height: 15px;
            background: #00c3c0;
            background: linear-gradient(left, #00c3c0, #7968a8);
            background: -o-linear-gradient(left, #00c3c0, #7968a8);
            background: -moz-linear-gradient(left, #00c3c0, #7968a8);
            background: -webkit-gradient(linear, 0 0, 100% 100%, from(#00c3c0), to(#7968a8));
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .score-wrapper .name-content {
            padding-left: 20px;
            line-height: 50px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .score-wrapper .subject-score-content {
            padding-left: 25px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .score-wrapper .subject-score-content .subject-score-item {
            line-height: 27px;
            color: #109e29;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .score-wrapper .subject-score-content .subject-score-item.down-score {
            font-weight: 600;
            color: #fd006f;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .percent-wrapper {
            display: inline-block;
            width: 75%;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .percent-wrapper .percent-content {
            width: 100%;
            height: 325px;
        }

        .checkscore-wrapper .checkscore-content .subject-wrapper .percent-wrapper .percent-content > div {
            width: 100%;
            height: 325px;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper {
            width: 100%;
            padding: 0 50px;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .margin-top-20 {
            margin-top: 20px;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .question-list {
            border: 1px solid #ddd;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .question-list .title {
            width: 100%;
            height: 25px;
            background: #e7e3ed;
            overflow: hidden;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .question-list .title > div {
            float: left;
            width: 50%;
            height: 25px;
            line-height: 25px;
            text-align: center;
            color: #333;
            font-size: 14px;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .question-list ul {
            width: 100%;
            overflow: hidden;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .question-list ul li {
            float: left;
            width: 50%;
            text-align: center;
            min-height: 400px;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .question-list ul li .sub-title {
            margin: 15px 0 0 20px;
            /* width: 100%; */
            height: 40px;
            line-height: 40px;
            text-indent: 15px;
            color: #333;
            font-size: 14px;
            font-weight: bold;
            border-left: 5px solid #00c3c0;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .question-list ul li .score-charts {
            float: left;
            width: 100%;
            height: 360px;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .text-list {
            padding: 20px 40px;
            width: 100%;
            min-height: 250px;
            border: 1px solid #ddd;
            border-left: 10px solid transparent;
            box-sizing: border-box;
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
            background-image: linear-gradient(#fff, #fff), linear-gradient(#00c4a1, #6789c6);
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .text-list .question-name-list {
            padding-top: 10px;
            width: 100%;
            overflow: hidden;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .text-list .question-name-list li {
            float: left;
            width: 33.33%;
            height: 25px;
            line-height: 25px;
            color: #109e29;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .text-list .question-name-list li:nth-child(3n-1) {
            text-align: center;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .text-list .question-name-list li:nth-child(3n) {
            text-align: right;
        }

        .checkscore-wrapper .checkscore-content .question-wrapper .question-content .text-list .question-name-list li.down-score {
            font-weight: 600;
            color: #fd006f;
        }

        /* 知识点 */
        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper {
            width: 100%;
            padding: 0 50px;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .margin-top-20 {
            margin-top: 20px;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .question-content {
            width: 100%;
            min-height: 500px;
            border: 1px solid #ddd;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .question-content .title {
            width: 100%;
            height: 25px;
            line-height: 25px;
            text-indent: 20px;
            background: #e7e3ed;
            overflow: hidden;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .question-content .line-chart-content {
            width: 100%;
            min-height: 475px;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .text-list {
            padding: 20px 40px;
            width: 100%;
            min-height: 250px;
            border: 1px solid #ddd;
            border-left: 10px solid transparent;
            box-sizing: border-box;
            background-clip: padding-box, border-box;
            background-origin: padding-box, border-box;
            background-image: linear-gradient(#fff, #fff), linear-gradient(#00c4a1, #6789c6);
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .text-list .question-name-list {
            padding-top: 10px;
            width: 100%;
            overflow: hidden;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .text-list .question-name-list li {
            float: left;
            width: 33.33%;
            height: 25px;
            line-height: 25px;
            color: #109e29;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .text-list .question-name-list li:nth-child(3n-1) {
            text-align: center;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .text-list .question-name-list li:nth-child(3n) {
            text-align: right;
        }

        .checkscore-wrapper .checkscore-content .konwlwdge-wrapper .text-list .question-name-list li.down-score {
            font-weight: 600;
            color: #fd006f;
        }

        /*# sourceMappingURL=subjectscorereport.css.map */

    </style>
<#-- <link rel="stylesheet" type="text/css" href="css/report.css"> </link>-->
</head>
<body>
<!-- header -->
<div class="down-head">
    <img src=../img/green_logo.png"/>
</div>
<!-- checkscore-wrapper里面存放每一个学生的报告 -->
<mark>富民，这里是开始是一个学生的所有报告，开发后删除</mark>
<div class="checkscore-wrapper">
    <div class="checkscore-content">
        <!-- 标题和学生信息 -->
        <div class="info-content">
            <h1 class="title">期中考试报告单</h1>
            <div class="info-list">
                <ul>
                    <li>
                        <span>年级:</span>
                        <b>5年级</b>
                    </li>
                    <li>
                        <span>班级:</span>
                        <b>3班</b>
                    </li>
                    <li>
                        <span>姓名:</span>
                        <b>阿奎罗</b>
                    </li>
                    <li>
                        <span>学号:</span>
                        <b>201122133100422011221331004220112213310042</b>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 科目得分分析 -->
        <div class="subject-wrapper">
            <!-- 雷达图  -->
            <div class="radar-wrapper">
                <div class="title">
                    <div class="left-title">科目实际得分雷达图</div>
                    <div class="right-title">科目实际得分</div>
                </div>
                <div class="rader-content">
                    <div class="charts" id="radarChart"></div>
                    <div class="score-num">
                        <div class="score-num-content">
                            <div class="border"></div>
                            <div class="nums">
                                <ul>
                                    <li>
                                        <div>
                                            <span>语文</span>
                                            <b>115</b>
                                        </div>
                                        <div>
                                            <span>化学</span>
                                            <b>115</b>
                                        </div>
                                        <div>
                                            <span>政治</span>
                                            <b>115</b>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <span>数学</span>
                                            <b>102</b>
                                        </div>
                                        <div>
                                            <span>生物</span>
                                            <b>88</b>
                                        </div>
                                        <div>
                                            <span>地理</span>
                                            <b>65</b>
                                        </div>
                                    </li>
                                    <li>
                                        <div>
                                            <span>英语</span>
                                            <b>88</b>
                                        </div>
                                        <div>
                                            <span>物理</span>
                                            <b>88</b>
                                        </div>
                                        <div>
                                            <span>历史</span>
                                            <b>115</b>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 科目实际得分与班级平均分对比图 -->
            <div class="really-wrapper">
                <div class="title">科目实际得分与班级平均分对比图</div>
                <div class="really-content">
                    <div id="reallyChart"></div>
                </div>
            </div>
            <!-- 科目成绩 -->
            <div class="score-wrapper">
                <div class="score-border"></div>
                <div class="name-content">
                    周杰伦，您的本次考试成绩---
                </div>
                <div class="subject-score-content">
                    <ul>
                        <li class="subject-score-item">语文124分，高于班级平均分23分</li>
                        <li class="subject-score-item down-score">数学124分，低于班级平均分23分</li>
                        <li class="subject-score-item">英语124分，高于班级平均分23分</li>
                        <li class="subject-score-item down-score">历史124分，低于班级平均分23分</li>
                        <li class="subject-score-item">地理124分，高于班级平均分23分</li>
                        <li class="subject-score-item">政治124分，高于班级平均分23分</li>
                        <li class="subject-score-item">物理124分，高于班级平均分23分</li>
                        <li class="subject-score-item down-score">化学124分，低于班级平均分23分</li>
                        <li class="subject-score-item">生物124分，高于班级平均分23分</li>
                    </ul>
                </div>
            </div>
            <!-- 百分比得分 -->
            <div class="percent-wrapper">
                <div class="title">百分比得分</div>
                <div class="percent-content">
                    <div id="percentChart"></div>
                </div>
            </div>
            <!-- 科目成绩 -->
            <div class="score-wrapper">
                <div class="percent-border"></div>
                <div class="name-content">
                    周杰伦，您的本次考试成绩---
                </div>
                <div class="subject-score-content">
                    <ul>
                        <li class="subject-score-item">语文124分，高于班级平均分23分</li>
                        <li class="subject-score-item down-score">数学124分，低于班级平均分23分</li>
                        <li class="subject-score-item">英语124分，高于班级平均分23分</li>
                        <li class="subject-score-item down-score">历史124分，低于班级平均分23分</li>
                        <li class="subject-score-item">地理124分，高于班级平均分23分</li>
                        <li class="subject-score-item">政治124分，高于班级平均分23分</li>
                        <li class="subject-score-item">物理124分，高于班级平均分23分</li>
                        <li class="subject-score-item down-score">化学124分，低于班级平均分23分</li>
                        <li class="subject-score-item">生物124分，高于班级平均分23分</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 这里开始循环每一个科目的小题得分和知识点得分 -->
        <mark>富民，这里是一个学生的一个科目的小题得分和知识点得分,开发后删除</mark>
        <ul>
            <!-- 一个科目一个li -->
            <li>
                <!-- 科目名称 -->
                <div class="subject-title">
                    <b>语文</b>
                </div>
                <!-- 小题得分分析 -->
                <div class="question-wrapper">
                    <div class="question-content margin-top-20">
                        <!-- 图表  -->
                        <div class="question-list">
                            <div class="title">
                                <div class="left-title">小题得分统计</div>
                                <div class="right-title">小题失分统计</div>
                            </div>
                            <!-- 图表 -->
                            <div class="rader-content">
                                <ul>
                                    <li>
                                        <div class="score-charts" id="getScore"></div>
                                    </li>
                                    <li>
                                        <div class="score-charts" id="loseScore"></div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <!-- 小题文本说明 -->
                        <div class="text-list margin-top-20">
                            <div class="name">陈奕迅，您本次考试，语文小题得分、失分统计如下---</div>
                            <ul class="question-name-list">
                                <li>
                                    <span>1:</span>
                                    <span>第1小题得分10分,</span>
                                    <span>失分0分</span>
                                </li>
                                <li class="down-score">
                                    <span>1:</span>
                                    <span>第1小题得分10分,</span>
                                    <span>失分0分</span>
                                </li>
                                <li>
                                    <span>1:</span>
                                    <span>第1小题得分10分,</span>
                                    <span>失分0分</span>
                                </li>
                                <li>
                                    <span>1:</span>
                                    <span>第1小题得分10分,</span>
                                    <span>失分0分</span>
                                </li>
                                <li class="down-score">
                                    <span>1:</span>
                                    <span>第1小题得分10分,</span>
                                    <span>失分0分</span>
                                </li>
                                <li>
                                    <span>1:</span>
                                    <span>第1小题得分10分,</span>
                                    <span>失分0分</span>
                                </li>
                                <li class="down-score">
                                    <span>1:</span>
                                    <span>第1小题得分10分,</span>
                                    <span>失分0分</span>
                                </li>
                                <li>
                                    <span>1:</span>
                                    <span>第1小题得分10分,</span>
                                    <span>失分0分</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 知识点得分分析 -->
                <div class="konwlwdge-wrapper">
                    <div class="question-content margin-top-20">
                        <!-- 图表  -->
                        <div class="title">知识点得分分析图</div>
                        <!-- 这里的高度动态设置 -->
                        <div class="line-chart-content" id="knowledgeChart"></div>
                    </div>
                    <!-- 知识点文本说明 -->
                    <div class="text-list margin-top-20">
                        <div class="name">陈奕迅，您本次考试，语文知识点得分、失分统计如下---</div>
                        <ul class="question-name-list">
                            <li>
                                <span>1:</span>
                                <span>第1知识点得分10分,</span>
                                <span>失分0分</span>
                            </li>
                            <li class="down-score">
                                <span>1:</span>
                                <span>第1知识点得分10分,</span>
                                <span>失分0分</span>
                            </li>
                            <li>
                                <span>1:</span>
                                <span>第1知识点得分10分,</span>
                                <span>失分0分</span>
                            </li>
                            <li>
                                <span>1:</span>
                                <span>第1知识点得分10分,</span>
                                <span>失分0分</span>
                            </li>
                            <li class="down-score">
                                <span>1:</span>
                                <span>第1知识点得分10分,</span>
                                <span>失分0分</span>
                            </li>
                            <li>
                                <span>1:</span>
                                <span>第1知识点得分10分,</span>
                                <span>失分0分</span>
                            </li>
                            <li class="down-score">
                                <span>1:</span>
                                <span>第1知识点得分10分,</span>
                                <span>失分0分</span>
                            </li>
                            <li>
                                <span>1:</span>
                                <span>第1知识点得分10分,</span>
                                <span>失分0分</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 一个科目结束 -->
                </div>
            </li>
        </ul>
        <!-- 一个科目的小题得分和知识点得分 end-->
    </div>
</div>
<mark>富民，这里是开始是一个学生的所有报告结束，开发后删除</mark>
<!-- js -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<!-- 自定义方法 -->
<script type="text/javascript">
    /*雷达图*/
    function drawRadarCharts() {
        var radarChart = echarts.init(document.getElementById('radarChart'));
        // 实现eachrts不刷新就能自适应屏幕
        window.onresize = radarChart.resize;
        radarChart.setOption({
            color: ['#00c4c0'],
            tooltip: {},
            legend: {},
            radar: {
                shape: '',
                indicator: [
                    {name: '语文', max: 150},
                    {name: '数学', max: 150},
                    {name: '英语', max: 150},
                    {name: '化学', max: 150},
                    {name: '物理', max: 150},
                    {name: '生物', max: 150}
                ]
            },
            series: [{
                name: '各科目得分',
                type: 'radar',
                symbolSize: 10,//拐点大小
                itemStyle: {
                    normal: {
                        lineStyle: {
                            width: 4 // 线宽
                        },
                        areaStyle: {
                            type: 'default'
                        }
                    }
                },
                data: [
                    {
                        value: [112, 99, 134, 100, 112, 78],
                        name: '各科目得分'
                    }
                ]
            }]
        })
    }
    /*科目实际得分*/
    function drawReallyCharts() {
        var reallyChart = echarts.init(document.getElementById('reallyChart'));
        // 实现eachrts不刷新就能自适应屏幕
        window.onresize = reallyChart.resize;
        reallyChart.setOption({
            color: ['#00c4c0', '#7968a8', '#ffaa35'],
            title: {
                // text: '科目实际得分与班级平均分对比图',
                // subtext: '副标题'
            },
            // 设置是否撑满指定宽高
            grid: {
                x: 60,
                y: 40,
                x2: 30,
                y2: 40,
                borderWidth: 10
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['科目得分', '班级平均分', '科目平均分']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['语文', '数学', '英语', '物理', '化学', '生物', '历史']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            series: [
                {
                    name: '科目得分',
                    type: 'line',
                    symbolSize: 10,//拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 4//折线宽度
                            }
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '班级平均分',
                    type: 'line',
                    symbolSize: 10,//拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 4//折线宽度
                            }
                        }
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '科目平均分',
                    type: 'line',
                    symbol: 'arrow', //拐点样式
                    symbolSize: 13,//拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 4,//折线宽度
                                type: 'dotted'//虚线
                            }
                        }
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
            ]
        })
    }
    /*百分比得分*/
    function drawPercentCharts() {
        var percentChart = echarts.init(document.getElementById('percentChart'));
        // 实现eachrts不刷新就能自适应屏幕
        window.onresize = percentChart.resize;
        percentChart.setOption({
            color: ['#00c4c0', '#7968a8', '#ffaa35'],
            title: {
                // text: '科目实际得分与班级平均分对比图',
                // subtext: '副标题'
            },
            // 设置是否撑满指定宽高
            grid: {
                x: 60,
                y: 40,
                x2: 30,
                y2: 40,
                borderWidth: 10
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['科目得分', '班级平均分', '科目平均分']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['语文', '数学', '英语', '物理', '化学', '生物', '历史']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            series: [
                {
                    name: '科目得分',
                    type: 'line',
                    symbolSize: 10,//拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 4//折线宽度
                            }
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '班级平均分',
                    type: 'line',
                    symbolSize: 10,//拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 4//折线宽度
                            }
                        }
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '科目平均分',
                    type: 'line',
                    symbol: 'arrow', //拐点样式
                    symbolSize: 13,//拐点大小
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 4,//折线宽度
                                type: 'dotted'//虚线
                            }
                        }
                    },
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
            ]
        })
    }
    /*小题得分分析*/
    function drawQuestionChart(id) {
        var myCharts = echarts.init(document.getElementById(id));
        window.onresize = myCharts.resize;
        myCharts.setOption({
            color: ['#00c4c0', '#2c8dea', '#08d05d', '#8f7fb5', '#ff76a2', '#ffa733', '#d05c8c'],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}得分: {c} <br/> 得分占比: {d}%"
            },
            legend: {},
            series: [
                {
                    name: '小题得分统计',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: [
                        {value: 10, name: '第1小题', selected: true},
                        {value: 3, name: '第2小题'},
                        {value: 13, name: '第3小题'},
                        {value: 34, name: '第4小题'},
                        {value: 22, name: '第5小题'},
                        {value: 10, name: '第6小题'},
                        {value: 3, name: '第7小题'},
                        {value: 13, name: '第8小题'},
                        {value: 34, name: '第9小题'},
                        {value: 22, name: '第10小题'}
                    ]
                }
            ]
        })
    }
    drawQuestionChart('getScore');
    drawQuestionChart('loseScore');
    drawRadarCharts();
    drawReallyCharts();
    drawPercentCharts();

    /*
     *知识点
    */
    var list = ['知识点知识点知识点知识点知识点知识点', '知识点', '知识点', '知识点', '知识点', '知识点', '知识点', '知识点', '知识点'];
    /*知识点得分*/
    function drawKnowledgeChart() {
        var knowledgeChart = echarts.init(document.getElementById('knowledgeChart'));
        window.onresize = knowledgeChart.resize;
        knowledgeChart.setOption({
            color: ['#6989c6', '#00c198', '#c43b75'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            legend: {
                data: ['总分', '得分', '失分'],
                height: 400,
            },
            grid: {
                x: 150,
                y: 40,
                x2: 30,
                y2: 20
            },
            xAxis: [
                {
                    type: 'value'
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    axisTick: {show: false},
                    data: list,
                    axisLabel: {  //倾斜Y轴字体，防止字体显示不全
                        interval: 0,
                        rotate: -40
                    }
                }
            ],
            series: [
                {
                    name: '总分',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true
                        }
                    },
                    data: [320, 302, 341, 374, 390, 450, 420, 220, 330]
                },
                {
                    name: '得分',
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    },
                    data: [200, 170, 240, 244, 200, 220, 210, 100, 100]
                },
                {
                    name: '失分',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        normal: {
                            show: true,
                            position: 'left'
                        }
                    },
                    data: [-120, -132, -101, -134, -190, -230, -210, -120, -230]
                }
            ]
        })
    }
    /*因为知识点条数不固定，所以每次初始化图表前，先初始化高度*/
    function _initChartHeight(list) {
        if (!list) return;
        var itemHeight = 50;
        document.getElementById('knowledgeChart').style.height = (70 * list.length) + 'px';
    }
    _initChartHeight(list);
    drawKnowledgeChart();
</script>
</body>
</html>